<template>
    <basic-layout header-width="1200px" footer-position="fixed">
        <!-- Banner -->
        <div class="banner">
            <div class="banner-content">
                <div class="banner-text">
                    <h1>吃惊开发者平台</h1>
                    <p>
                        <span>开源中国热门开源项目&nbsp;</span>
                        <a target="_blank" href='https://gitee.com/cjlgb/cjlgb-cloud-platform/stargazers'>
                            <img src='https://gitee.com/cjlgb/cjlgb-cloud-platform/badge/star.svg?theme=dark' alt='star' />
                        </a>
                    </p>
                    <p>基于Spring Cloud最完美实践</p>
                    <p>简单 快捷 开启微服务之旅</p>
                </div>
            </div>
        </div>
    </basic-layout>
</template>
<script>
    import BasicLayout from '../components/layouts/BasicLayout';
    export default {
        components : { BasicLayout }
    }
</script>
<style scoped>
    .banner{
        height: 538px;
        min-width: 1000px;
        background: rgb(23,121,255) center center no-repeat url(//cjlgb-design-developer.cdn.bcebos.com/images%2Fk6yy278b_w1920_h560.jpeg);
    }
    .banner .banner-content{
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .banner .banner-content .banner-text{
        position: absolute;
        width: 400px;
        padding: 20px;
        top: 160px;
        left: 50px;
    }
    .banner .banner-content h1,
    .banner .banner-content p{
        color: white;
    }
    .banner .banner-content h1{
        font-size: 34px;
    }
</style>
